<template>
	<view style="height: 100%;width: 750rpx;background-color: #F5F5F8;">
		<view>
			<uni-search-bar @confirm="search" @input="input()" v-model="value" placeholder="名称搜索" :radius="100" clearButton="none" cancelButton="none" bgColor="#ffffff"></uni-search-bar>
		</view>
		<view style="display: flex;height: 40rpx;margin-top: 10rpx;">
			<view style="width: 374rpx;height: 32rpx;display: flex;border-right: 2rpx solid #D8D8D8;">
				<view style="margin: auto;display: flex;"@click="light" v-if="active">
					<view style="font-size: 32rpx;line-height: 32rpx;">已督查</view>
					<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;">{{num}}</view>
				</view>	
				<view style="margin: auto;display: flex;"@click="light" v-else>
					<view style="font-size: 32rpx;line-height: 32rpx;color: #388CFE;">已督查</view>
					<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;color: #388CFE;">{{num}}</view>
				</view>	
			</view>
			<view style="width: 374rpx;height: 32rpx;display: flex;">
				<view style="margin: auto;display: flex;" @click="light1" v-if="real">
					<view style="font-size: 32rpx;line-height: 32rpx;color: #388CFE;">未督查</view>
					<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;color: #388CFE;">{{num1}}</view>
				</view>	
				<view style="margin: auto;display: flex;" @click="light1" v-else>
					<view style="font-size: 32rpx;line-height: 32rpx;">未督查</view>
					<view style="font-size: 32rpx;line-height: 32rpx;margin-left: 12rpx;">{{num1}}</view>
				</view>	
			</view>
		</view>
		<view v-if="real">
			<view v-for="(item,index) in listW" :key="item">	
				<view style="width: 690rpx;background-color: #FFFFFF;border-radius: 12rpx;margin-top: 20rpx;margin-left: 30rpx;" v-if="num1!==0">
					<view style="display: flex;" @click="gotoXQ(item.id)">
						<view >
							<view style="font-size: 36rpx;line-height: 36rpx;padding-top: 30rpx;padding-left: 30rpx;width: 500rpx;" >{{item.name}}</view>
							<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;width: 500rpx;">{{item.address}}</view>
							<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{item.corporation}} {{item.corporationMobile}}</view>
							
							
						</view>
						<view style="width: 148rpx;height: 124rpx;margin-top: 36rpx;text-align: center;">
							<image src="../../static/coordinate@3x.png" style="width: 52rpx;height: 76rpx;display: inline-block;"></image>
							<view style="color: #FB9A17;font-size: 36rpx;line-height: 36rpx;text-align: center;">{{item.distance | filterDis}}</view>
						</view>
					</view>
					<view style="width: 690rpx;height: 1rpx;background-color: #D8D8D8;margin-top: 32rpx;"></view>
					<view style="display: flex;" @click="gotoEX(item.taskId,item.name,item.id)">
						<image src="../../static/icon-jiancha@3x.png" style="width: 48rpx;height: 48rpx;margin-left: 256rpx;margin-top: 22rpx;"></image>
						<view style="color: #388CFE;font-size: 32rpx;line-height: 32rpx;margin-left: 2rpx;margin-top: 30rpx;margin-bottom: 20rpx;">开始检查</view>
					</view>
				</view>
			</view>
			<image src="../../static/img_k@3x.png" style="width: 362rpx;height: 360rpx;margin-top: 190rpx;margin-left: 208rpx;" v-if="listW.length == 0 && (isLoadMore=='noMore')"></image>
			<view v-else>
				<view v-show="isLoadMore" style="margin-bottom: 30rpx;">
					<uni-load-more :status="isLoadMore" :contentText="contentText" showText="false" @clickLoadMore="loadmore()"></uni-load-more>
				</view>
			</view>
		</view>
		<view v-else>
			<view v-for="(item,index) in listY" :key=index>
				<view style="width: 690rpx;border-radius: 12rpx;margin-top: 20rpx;margin-left: 30rpx;background-color: #FFFFFF;" v-if="item.count!==0">
					<view @click="gotoXQ(item.id)">
						<view style="display: flex;">	
							<view style="font-size: 36rpx;line-height: 36rpx;margin-top: 30rpx;margin-left: 30rpx;width: 500rpx;">{{item.name}}</view>
							<view style="background-color: rgba(255, 77, 79, 0.12);font-size: 24rpx;line-height: 36rpx;width: 108rpx;height: 36rpx;color: #FF4D4F;text-align: center;margin-top: 30rpx;margin-left: 10rpx;border-radius: 4rpx;">{{item.count}}处隐患</view>
						</view>
						<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{item.address}}</view>
						<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{item.corporation}} {{item.corporationMobile}}</view>
						<view style="font-size: 24rpx;line-height: 24rpx;color: #999999;margin-top: 20rpx;margin-left: 30rpx;">督查时间：{{item.createTime}}</view>
						<view style="font-size: 24rpx;line-height: 24rpx;color: #999999;margin-top: 20rpx;margin-left: 30rpx;">督查人：{{item.userName}}</view>
						<view style="width: 690rpx;height: 1rpx;background-color: #D8D8D8;margin-top: 32rpx;"></view>
					</view>
					<view style="display: flex;" @click="gotoRd(item.createTime,item.userName,item.count,item.anwserId,item.repair)">
						<image src="../../static/iconCK@3x.png" style="width: 48rpx;height: 48rpx;margin-top: 22rpx;margin-left: 194rpx;"></image>
						<view style="color: #388CFE;font-size: 32rpx;line-height: 32rpx;margin-top: 30rpx;margin-left: 2rpx;margin-bottom: 20rpx;">查看隐患整改记录</view>
					</view>
				</view>
				<view style="width: 690rpx;border-radius: 12rpx;margin-top: 20rpx;margin-left: 30rpx;background-color: #FFFFFF;padding-bottom: 32rpx;" v-else @click="gotoXQ(item.id)">
					<view style="display: flex;margin-bottom: 20rpx;">
						<view style="font-size: 36rpx;line-height: 36rpx;margin-top: 30rpx;margin-left: 30rpx;">{{item.name}}</view>
					</view>
					<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{item.address}}</view>
					<view style="color: #666666;font-size: 28rpx;line-height: 28rpx;margin-top: 20rpx;margin-left: 30rpx;">{{item.corporation}} {{item.corporationMobile}}</view>
					<view style="font-size: 24rpx;line-height: 24rpx;color: #999999;margin-top: 20rpx;margin-left: 30rpx;">督查时间：{{item.createTime}}</view>
					<view style="font-size: 24rpx;line-height: 24rpx;color: #999999;margin-top: 20rpx;margin-left: 30rpx;">督查人：{{item.userName}}</view>
				</view>
			</view>
			<image src="../../static/img_k@3x.png" style="width: 362rpx;height: 360rpx;margin-top: 190rpx;margin-left: 208rpx;" v-if="listY.length === 0 && (isLoadMoreY=='noMore')"></image>
			<view v-else>
				<view v-show="isLoadMoreY" style="margin-bottom: 30rpx;">
					<uni-load-more :status="isLoadMoreY" :contentText="contentText" showText="false" @clickLoadMore="loadmoreY()"></uni-load-more>
				</view>
			</view>
		</view>
		<tanChuang ref="tanC"></tanChuang>
	</view>	
</template>

<script>
	import tanChuang from './components/tanChuang.vue'
	export default {
		components: {
			tanChuang
		},
		filters:{
			filterDis(e){
				 // console.log(e,'eee');
				if(e<1000){
					return e ? e.toFixed(0)+'m' : '';;
				}else if(e==undefined){
					return 0+'m'
				}
				else{
				return (e/2/500).toFixed(2)+'km'
				}
			},
		},
		data() {
			return {
				real:true,
				active:true,
				num:'',
				num1:'',
				tan:0,
				listY:[],
				listW:[],
				lngs:'',
				lats:'',
				name:'',
				startTime:'',
				endTime:'',
				page:1,
				isLoadMore:'more',
				contentText:{contentdown: "查看更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"},
				listY:[],
				pageY:1,
				isLoadMoreY:'more',
				value:''
			}
		},
		methods: {
			gotoXQ(id){
				uni.navigateTo({
					url:'../list/xiangqing?id='+id
				})
			},
			input(res){
				console.log(res);
			},
			search(res){
				console.log(res.value);
				this.value=res.value
				if(this.active==true){
					console.log('1241251356125');
					this.$myRequest({
						url:'/project_flood/v1/check/task/relation/owner/page',
						data:{"pageNum":1,"pageSize":100,"taskId":'521473093596745728',"point":this.lngs+','+this.lats,"status":0,"name":this.name,"startTime":this.startTime,"endTime":this.endTime,"areaId":330212,"ownerName":res.value}
					}).then((res)=>{
						console.log(res);
						this.listW=res.data.data.list
						if(this.listW.length<res.data.data.total)
							{
								this.isLoadMore='more'
							}
						else
							{
								this.isLoadMore='noMore'
							}
					})
				}
				else{
					this.$myRequest({
						url:'/project_flood/v1/check/task/relation/owner/page',
						data:{"pageNum":1,"pageSize":100,"taskId":'521473093596745728',"point":this.lngs+','+this.lats,"status":1,"name":this.name,"startTime":this.startTime,"endTime":this.endTime,"areaId":330212,"ownerName":res.value}
					}).then((res)=>{
						console.log(res);
						this.listY=res.data.data.list
						if(this.listY.length<res.data.data.total)
							{
								this.isLoadMoreY='more'
							}
						else
							{
								this.isLoadMoreY='noMore'
							}
					})
				}
			},
			light(){
				this.real=false,
				this.active=false
				this.getName()
				this.value=''
			},
			light1(){
				this.real=true,
				this.active=true
				this.getNameW()
				this.value=''
			},
			gotoEX(taskId,name,id){
				uni.navigateTo({
					url:`./DCexercise?taskId=${taskId}&name=${name}&id=${id}`
				})
			},
			gotoRd(createTime,userName,count,anwserId,repair){
				uni.navigateTo({
					url:`./YHrecord?createTime=${createTime}&userName=${userName}&count=${count}&anwserId=${anwserId}&repair=${repair}`
				})
			},
			change(){
				this.$refs.tanC.open()
				this.$refs.tanC.text=this.name
			},
			async getName(){
				//console.log(2333333333);
				this.$myRequest({
					url:'/project_flood/v1/check/task/relation/owner/page',
					data:{"pageNum":this.page,"pageSize":100,"taskId":'521473093596745728',"point":this.lngs+','+this.lats,"status":1,"name":this.name,"startTime":this.startTime,"endTime":this.endTime,"areaId":330212}
				}).then((res)=>{
					
					console.log(res);
					this.listY=res.data.data.list
					this.num=res.data.data.total
					if(this.listY.length<res.data.data.total)
						{
							this.isLoadMoreY='more'
						}
					else
						{
							this.isLoadMoreY='noMore'
						}
					})
					
			},
			async getNameW(){
				//console.log(2333333333);
				this.$myRequest({
					url:'/project_flood/v1/check/task/relation/owner/page',
					data:{"pageNum":1,"pageSize":100,"taskId":'521473093596745728',"point":this.lngs+','+this.lats,"status":0,"name":this.name,"startTime":this.startTime,"endTime":this.endTime,"areaId":330212}
				}).then((res)=>{
					console.log(res.data.data.total);
					this.listW=res.data.data.list
					this.num1=res.data.data.total
					if(this.num1==0 && this.tan==0){
						this.change()
					}
					if(this.listW.length<res.data.data.total)
						{
							this.isLoadMore='more'
						}
					else
						{
							this.isLoadMore='noMore'
						}
					})
					
			},
			loadmore(){
				if(this.isLoadMore !== 'more') return
				this.page=this.page+1
				this.$myRequest({
					url: '/project_flood/v1/check/task/relation/owner/page',
					data: {"pageNum":this.page,"pageSize":100,"point":this.lngs+","+this.lats,"status":0,"name": this.name,"startTime": this.startTime,"endTime": this.endTime,"range": this.range,"areaId":this.areaId,"ownerName":this.value},
				}).then((res)=>{
					console.log(res);
					this.listW=this.listW.concat(res.data.data.list)
					if(this.listW.length<res.data.data.total)
						{
							this.isLoadMore='more'
						}
					else
						{
							this.isLoadMore='noMore'
						}
				})
			},
			loadmoreY(){
				if(this.isLoadMoreY !== 'more') return
				this.pageY=this.pageY+1
				this.$myRequest({
					url: '/project_flood/v1/check/task/relation/owner/page',
					data: {"pageNum":this.page,"pageSize":100,"point":this.lngs+","+this.lats,"status":1,"name": this.name,"startTime": this.startTime,"endTime": this.endTime,"range": this.range,"areaId":this.areaId,"ownerName":this.value},
				}).then((res)=>{
					console.log(res);
					this.listY=this.listY.concat(res.data.data.list)
					if(this.listY.length<=res.data.data.total)
						{
							this.isLoadMoreY='more'
						}
					else
						{
							this.isLoadMoreY='noMore'
						}
				})
			}
			
		},
		onLoad(options) {
			console.log(options);
			this.endTime=options.endTime
			this.name=options.name
			this.startTime=options.startTime
			if(options.tan!=undefined){
				console.log(options.tan);
				this.tan=options.tan
			}
			if(options.reals!=undefined){
				this.real=false,
				this.active=false
			}
			try {
			    const X = uni.getStorageSync('lng');
				this.lngs=X;
			    if (X) {
			        // console.log(X);
			    }
			} catch (e) {
			    // error
			}
			try {
			    const Y = uni.getStorageSync('lat');
				this.lats=Y
			    if (Y) {
			        // console.log(Y);
			    }
			} catch (e) {
			    // error
			}
			// this.$refs.popup.open();
			uni.setNavigationBarTitle({
				title:this.name
			});
			
		},
		onShow() {
			this.getName()
			this.getNameW()
			
		},
		onReady() {
			console.log();
		}
	}
</script>

<style lang="scss">
page{background-color: #F5F5F8;}

</style>
